<template>
    <div>
        <my-search></my-search>
        <div class="content">
            <div class="left">
                <div @click="changeHandle(item.cat_id)" :key="item.cat_id" v-for="item in listData" :class='["menu-item",currentIndex===item.cat_id?"active":""]'>
                    {{item.cat_name}}
                </div>
            </div>
            <div class="right">
                <div :key="item.cat_id" v-for="item in rightData" class="brand-item">
                    <div class="brand-title">
                        {{item.cat_name}}
                    </div>
                    <div class="brand-list">
                        <div :key="i" v-for="(brand,i) in item.children" class="brand">
                            <img :src="brand.cat_icon">
                            <p>{{brand.cat_name}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import mysearch from "../../components/mysearch.vue"
import request from "../../utils/request.js"
export default {
    data() {
        return {
            currentIndex:1,
            listData:[]
        }
    },
    components:{
        'my-search': mysearch
    },
    computed: {
        rightData() {
            let rd = this.listData.filter(item=> {
                return item.cat_id==this.currentIndex
            })
            return rd.length>0?rd[0].children:[]
        }
    },
    methods: {
        changeHandle(id) {
            this.currentIndex=id
        },
        async initData() {
            let res = await request('categories')
            this.listData= res.data.message
        }
    },
    created() {
        this.initData()
    }
}
</script>

<style scoped lang="scss">
@import 'main.scss';
</style>
